<template>
	<view class="content">
		<u-navbar back-text="" title="">
			<view style="width: 100%;display: flex;justify-content: center;font-weight: bold;font-size: 34rpx;">
				视频通话邀请
			</view>
			<view slot="right">
				<view style="margin-right: 30rpx;">
					<view v-if="groupusers.filter(e=>e.checkcs).length > 0" @click="save" style="display: flex;align-items: center;justify-content: center;background: #2c8bff;padding: 10rpx 25rpx;color: white;font-size: 24rpx;border-radius: 8rpx;">
						确定({{groupusers.filter(e=>e.checkcs).length}})
					</view>
					<view v-else style="display: flex;align-items: center;justify-content: center;background: #9cd4ff;padding: 10rpx 25rpx;color: white;font-size: 24rpx;border-radius: 8rpx;">
						确定
					</view>
				</view>
			</view>
		</u-navbar>
		<view v-if="groupusers.filter(e=>e.checkcs).length > 0"
			style="width: 100%;display: flex;align-items: center;background: white;padding: 15rpx;flex-wrap: wrap;border-bottom: 1rpx solid #d9d9d955;">
			<view v-for="(item,k) in groupusers.filter(e=>e.checkcs)" style="display: flex;flex-direction: column;align-items: center;">
				<u-avatar show-level
					:src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.uid + '.jpg'" size="80"
					style="margin: 10rpx;" mode="square"></u-avatar>
				<view style="font-size: 18rpx;margin-top: 3rpx;width: 80rpx;" class="u-line-1">
					{{item.name}}
				</view>
			</view>
		</view>

		<view v-else
			style="width: 100%;display: flex;align-items: center;background: white;padding: 35rpx 15rpx;flex-wrap: wrap;border-bottom: 1rpx solid #d9d9d955;color: #959595;">
			选择邀请成员
		</view>

		<scroll-view style="width: 100%;flex: 1;overflow-y: auto;flex-direction: column;background: #fff;" scroll-y
			:scroll-into-view="scrollTop">
			<view style="padding: 15rpx;">
				<view style="width: 100%;display: flex;flex-direction: column;">
					<view @click="clickuser(itemx)" v-for="(itemx,ain) in groupusers.filter(e=>e.uid != $store.state.user.user.id)" class="list-cell1"
						style="padding: 15rpx;display: flex;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #f3f3f3;">
						<view style="display: flex;align-items: center;">
							<u-avatar mode="square" size="80"
								:src="$store.state.common.systemInfo.fileurl + 'avatar/' + itemx.uid + '.jpg'"></u-avatar>
							<view
								style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center;">
								<view style="font-size: 30rpx;">
									{{itemx.name}}
								</view>
								<view v-if="itemx.note" style="color: #a6a6a6;font-size: 24rpx;">
									{{itemx.note}}
								</view>
							</view>
						</view>
						<view class="">
							<image v-if="itemx.checkcs" src="/static/images/checked.png"
								style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" mode=""></image>
							<image v-else src="/static/images/check.png"
								style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '../../common/event';
import moment from 'moment';
	export default {
		data() {
			return {
				scrollTop: '',
				groupusers: [],
				grids: [],
				id: '',
				name:''
			}
		},
		components: {

		},
		computed: {
			...mapState({
				groupinfo: function(state) {
					return state.friend.groups[this.id]
				},
				info: function(state) {
					return state.friend.chatgroup.find(e=>e.id == this.id)
				},
			})
		},
		onLoad({
			id,name
		}) {
			this.id = id
			this.name = name
			this.groupusers = JSON.parse(JSON.stringify(this.groupinfo))
		},
		watch:{
			
		},
		methods: {
			clickuser: function(e) {
				for(let o of this.groupusers){
					if(o.uid == e.uid){
						if(o.checkcs){
							o.checkcs = false
						}else{
							o.checkcs = true
						}
						break
					}
				}
				this.groupusers = JSON.parse(JSON.stringify(this.groupusers))
			},
			changeusercs: function(e) {
				console.log(e)
				this.groupusers.push(e)
				console.log(this.groupusers)
				this.grids = this.groupusers.map(e => e.id)
				console.log(this.grids)
			},
			removeusercs: function(e) {
				for (let o of this.groupusers) {
					if (o.id == e.id) {
						o.type = "普通成员"
					}
				}
			},
			haveue: function(e) {
				for(let o of this.groupusers){
					if(o.uid == e.id){
						return o.check
					}
				}
			},
			save: async function() {
				const users = this.groupusers.filter(e=>e.checkcs)
				console.log(users)
				
				const user = this.$store.state.user.user
				
				let idsstr = user.id+"_"
				const strarr = [{
					id:user.id,
					name:user.name
				}]
				
				for(let o of users){
					strarr.push({
						id:o.uid,
						name:o.name
					})
					idsstr= idsstr + o.uid + "_"
				}
				
				const str = JSON.stringify(strarr)
				
				const data = {
					name: user.name,
					uid: user.id,
					toname: '',
					toid: 0,
					gid: this.id,
					gname: this.name,
					type: 'videocall',
					content: `${str}`,
					timelong: 0,
					time: moment().valueOf(),
					money: 0,
					status: '正常',
					note: idsstr
				}
				const ret = await this.$u.post(`chat/chat/sendGMessage`, data)
				
				data.id = ret.data
				
				await this.$u.post(`chat/chat/groupvideocallinv`,{
					users,
					mid:data.id,
					id:this.id,
				})
				
				// #ifdef APP
				uni.redirectTo({
					url:"/pages/friend/gvideocall?mid="+data.id+"&id="+this.id
				})
				// #endif
				// #ifdef H5
				uni.redirectTo({
					url:"/pages/friend/gvideocallh5?mid="+data.id+"&id="+this.id
				})
				// #endif
			},
		}
	}
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
</style>